/**
 * 数据图表
 */

import { FC } from "react";
import { DataTableBox } from "../DataTable/style";
import TableOne from "./components/TableOne";
import TableThree from "./components/TableThree";
import TableTwo from "./components/TableTwo";
import TableFour from "./components/TableFour";
import { IDateCountGoodsPart, IDateCountGoodsStatus, IDateCountLoadingStatus, IDateCountShipCount } from "../../../../../type/DataStatistics/api";

const DataChart:FC<{
      datalistOne?:IDateCountGoodsStatus[],
        datalistTwo?:IDateCountGoodsPart[],
        datalistThr?:IDateCountShipCount[],
        datalistFour?:IDateCountLoadingStatus[],
}> = ({
    datalistOne,
    datalistTwo,
    datalistThr,
    datalistFour,
}) => {
    return (
        <DataTableBox>
        <div className="table">
            <div className="tabletitle">品种销售情况</div>
            <TableOne
            datalistOne={datalistOne}
                />
        </div>
        <div className="table">
        <div className="tabletitle">品种销量占比</div>
            <TableTwo
                datalistTwo={datalistTwo}
                />
        </div>
        <div className="table">
        <div className="tabletitle">客户发运量统计</div>
            <TableThree
              datalistThr={datalistThr}
                />
        </div>
        <div className="table" style={{position:'relative'}}>
        <div className="tabletitle">当日装车情况</div>
            <TableFour
                datalistFour={datalistFour}
                />
        </div>
    </DataTableBox>
    );
}

export default DataChart;